<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${category.categoryId != null ? '编辑分类' : '添加分类'}">分类管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .form-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-top: 2rem;
        }
        .form-title {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .form-title:after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            background: #0d6efd;
            margin: 10px auto;
            border-radius: 2px;
        }
        .form-label {
            font-weight: 600;
            color: #495057;
        }
        .parent-category-info {
            background: #e9ecef;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        .alert-info {
            border-left: 4px solid #0d6efd;
        }
        .no-parent-categories {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
<!-- 使用admin专用导航栏 -->
<div th:replace="~{common/admin-navbar :: navbar}"></div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="form-container">
                <h2 class="form-title" th:text="${category.categoryId != null ? '编辑分类' : '添加分类'}">添加分类</h2>
                
                <!-- 错误消息显示 -->
                <div th:if="${param.error}" class="alert alert-danger alert-dismissible fade show" role="alert">
                    <span th:if="${param.error[0] == 'parentNotFound'}">
                        <i class="fas fa-exclamation-triangle"></i> 所选择的父分类不存在！
                    </span>
                    <span th:if="${param.error[0] == 'invalidParent'}">
                        <i class="fas fa-exclamation-triangle"></i> 所选择的分类不是有效的父分类！
                    </span>
                    <span th:if="${param.error[0] == 'circularReference'}">
                        <i class="fas fa-exclamation-triangle"></i> 不能将分类设置为自己的子分类！
                    </span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                
                <form th:action="${category.categoryId != null ? '/admin/categories/update' : '/admin/categories/add'}" 
                      method="post" id="categoryForm">
                    
                    <!-- 编辑时需要隐藏的ID字段 -->
                    <input type="hidden" th:if="${category.categoryId != null}" 
                           name="categoryId" th:value="${category.categoryId}">
                    
                    <div class="mb-4">
                        <label for="categoryName" class="form-label">
                            <i class="fas fa-tag me-2"></i>分类名称
                        </label>
                        <input type="text" class="form-control" id="categoryName" name="categoryName" 
                               th:value="${category.categoryName}" required
                               placeholder="请输入分类名称">
                        <div class="form-text">分类名称应简洁明了，便于用户理解</div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">
                            <i class="fas fa-sitemap me-2"></i>分类类型
                        </label>
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            选择此分类的层级类型：<br>
                            • <strong>父分类</strong>：顶级分类，可以包含子分类<br>
                            • <strong>子分类</strong>：隶属于某个父分类的二级分类
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="radio" name="categoryType" 
                                   id="parentCategory" value="parent" 
                                   th:checked="${category.parentCategoryId == null}">
                            <label class="form-check-label" for="parentCategory">
                                <i class="fas fa-folder-open me-2"></i>父分类（顶级分类）
                            </label>
                        </div>
                        
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="categoryType" 
                                   id="subCategory" value="sub"
                                   th:checked="${category.parentCategoryId != null}">
                            <label class="form-check-label" for="subCategory">
                                <i class="fas fa-folder me-2"></i>子分类（隶属于父分类）
                            </label>
                        </div>
                    </div>

                    <!-- 父分类选择区域 -->
                    <div id="parentCategorySelection" class="mb-4" style="display: none;">
                        <label for="parentCategoryId" class="form-label">
                            <i class="fas fa-level-up-alt me-2"></i>选择父分类
                        </label>
                        
                        <!-- 检查是否有可用的父分类 -->
                        <div th:if="${parentCategories.empty}" class="no-parent-categories">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>暂无父分类可选择</strong><br>
                            请先添加父分类，然后再创建子分类。
                            <a href="/admin/categories/add" class="btn btn-sm btn-outline-primary mt-2">
                                <i class="fas fa-plus"></i> 先添加父分类
                            </a>
                        </div>
                        
                        <select th:unless="${parentCategories.empty}" class="form-select" id="parentCategoryId" name="parentCategoryId">
                            <option value="">请选择父分类</option>
                            <option th:each="parent : ${parentCategories}" 
                                    th:value="${parent.categoryId}" 
                                    th:text="${parent.categoryName}"
                                    th:selected="${parent.categoryId == category.parentCategoryId}">
                                父分类名称
                            </option>
                        </select>
                        <div th:unless="${parentCategories.empty}" class="form-text">
                            子分类必须隶属于一个已存在的父分类
                        </div>
                    </div>

                    <!-- 显示当前父分类信息（编辑子分类时） -->
                    <div th:if="${category.parentCategoryId != null}" class="parent-category-info">
                        <h6><i class="fas fa-info-circle me-2"></i>当前父分类信息</h6>
                        <div th:each="parent : ${parentCategories}">
                            <span th:if="${parent.categoryId == category.parentCategoryId}" 
                                  th:text="'隶属于：' + ${parent.categoryName}">
                                父分类信息
                            </span>
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="/admin/categories" class="btn btn-secondary me-md-2">
                            <i class="fas fa-times me-2"></i>取消
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i th:class="${(category.categoryId != null ? 'fas fa-save' : 'fas fa-plus') + ' me-2'}"></i>
                            <span th:text="${category.categoryId != null ? '保存修改' : '添加分类'}">添加分类</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
    console.log('页面加载完成');
    
    // 动态检查是否有父分类可选择
    function hasAvailableParentCategories() {
        var optionCount = $('#parentCategoryId option').length;
        var hasOptions = optionCount > 1; // 大于1是因为有一个"请选择父分类"的默认选项
        console.log('父分类选项数量：', optionCount, '是否有可选父分类：', hasOptions);
        return hasOptions;
    }
    
    // 检查提交按钮状态
    function checkSubmitButtonState() {
        var categoryType = $('input[name="categoryType"]:checked').val();
        var categoryName = $('#categoryName').val().trim();
        var parentCategoryId = $('#parentCategoryId').val();
        var hasParentCategories = hasAvailableParentCategories();
        
        console.log('检查按钮状态：', {
            categoryType: categoryType,
            categoryName: categoryName,
            parentCategoryId: parentCategoryId,
            hasParentCategories: hasParentCategories
        });
        
        // 必须有分类名称
        if (!categoryName) {
            console.log('禁用按钮：缺少分类名称');
            $('#submitBtn').prop('disabled', true);
            return;
        }
        
        if (categoryType === 'parent') {
            // 父分类：只要有名称就可以提交
            console.log('启用按钮：父分类且有名称');
            $('#submitBtn').prop('disabled', false);
        } else if (categoryType === 'sub') {
            // 子分类：需要有父分类可选择，并且已经选择了父分类
            if (hasParentCategories && parentCategoryId) {
                console.log('启用按钮：子分类且选择了父分类');
                $('#submitBtn').prop('disabled', false);
            } else {
                console.log('禁用按钮：子分类但条件不满足', {
                    hasParentCategories: hasParentCategories,
                    parentCategoryId: parentCategoryId
                });
                $('#submitBtn').prop('disabled', true);
            }
        } else {
            console.log('禁用按钮：未选择分类类型');
            $('#submitBtn').prop('disabled', true);
        }
    }
    
    // 监听分类名称输入
    $('#categoryName').on('input', function() {
        console.log('分类名称输入：', $(this).val());
        checkSubmitButtonState();
    });
    
    // 监听分类类型变化
    $('input[name="categoryType"]').change(function() {
        var categoryType = $(this).val();
        console.log('分类类型变化：', categoryType);
        
        if (categoryType === 'sub') {
            // 选择子分类
            $('#parentCategorySelection').show();
            
            // 动态刷新父分类列表
            refreshParentCategories().then(function(success) {
                if (success) {
                    var hasParentCategories = hasAvailableParentCategories();
                    
                    if (hasParentCategories) {
                        $('#parentCategoryId').prop('required', true);
                        console.log('显示父分类选择区域，有可选父分类');
                    } else {
                        $('#parentCategoryId').prop('required', false);
                        console.log('显示父分类选择区域，但无可选父分类');
                        // 延迟检查，以防父分类正在异步加载
                        setTimeout(function() {
                            if (!hasAvailableParentCategories()) {
                                alert('暂无父分类可选择，请先添加父分类！');
                            }
                        }, 500);
                    }
                } else {
                    console.error('刷新父分类失败');
                    alert('加载父分类失败，请刷新页面重试！');
                }
                checkSubmitButtonState();
            });
        } else {
            // 选择父分类
            $('#parentCategorySelection').hide();
            $('#parentCategoryId').prop('required', false);
            $('#parentCategoryId').val(''); // 清空父分类选择
            console.log('隐藏父分类选择区域');
            checkSubmitButtonState();
        }
    });

    /**
     * 动态刷新父分类列表
     */
    function refreshParentCategories() {
        return new Promise(function(resolve) {
            console.log('开始刷新父分类列表');
            
            $.ajax({
                url: '/api/categories/parents',
                method: 'GET',
                timeout: 10000,
                success: function(data) {
                    console.log('获取到父分类数据：', data);
                    
                    // 清空现有选项（保留默认选项）
                    var $select = $('#parentCategoryId');
                    $select.find('option:not(:first)').remove();
                    
                    // 添加新的父分类选项
                    if (data && data.length > 0) {
                        $.each(data, function(index, category) {
                            var option = $('<option></option>')
                                .attr('value', category.categoryId)
                                .text(category.categoryName);
                            $select.append(option);
                        });
                        console.log('父分类选项已更新，数量：', data.length);
                        resolve(true);
                    } else {
                        console.log('没有找到父分类数据');
                        resolve(false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('刷新父分类失败：', error);
                    resolve(false);
                }
            });
        });
    }

    /**
     * 验证分类数据完整性
     */
    function validateCategoryData() {
        console.log('验证分类数据完整性');
        
        // 检查父分类是否正确加载
        var parentCount = $('#parentCategoryId option').length - 1; // 减去默认选项
        console.log('当前父分类数量：', parentCount);
        
        if (parentCount === 0) {
            console.log('尝试重新加载父分类数据');
            refreshParentCategories().then(function(success) {
                if (success) {
                    console.log('父分类数据重新加载成功');
                } else {
                    console.error('父分类数据重新加载失败');
                }
                checkSubmitButtonState();
            });
        }
    }

    // 监听父分类选择变化
    $('#parentCategoryId').change(function() {
        console.log('父分类选择变化：', $(this).val());
        checkSubmitButtonState();
    });

    // 监听父分类选择框内容变化（用于处理异步加载）
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                console.log('父分类选择框内容发生变化');
                checkSubmitButtonState();
            }
        });
    });
    
    // 开始观察父分类选择框
    var parentSelect = document.getElementById('parentCategoryId');
    if (parentSelect) {
        observer.observe(parentSelect, { childList: true });
    }

    // 初始化页面状态
    function initializePage() {
        console.log('初始化页面状态');
        
        // 检查是否是编辑模式的子分类
        if ($('#subCategory').is(':checked')) {
            $('#parentCategorySelection').show();
            var hasParentCategories = hasAvailableParentCategories();
            if (hasParentCategories) {
                $('#parentCategoryId').prop('required', true);
            } else {
                // 如果没有父分类，尝试刷新
                refreshParentCategories();
            }
            console.log('编辑模式，显示子分类区域');
        }
        
        // 验证数据完整性
        validateCategoryData();
        
        checkSubmitButtonState();
    }

    // 表单提交验证
    $('#categoryForm').submit(function(e) {
        var categoryName = $('#categoryName').val().trim();
        var categoryType = $('input[name="categoryType"]:checked').val();
        var parentCategoryId = $('#parentCategoryId').val();
        var hasParentCategories = hasAvailableParentCategories();
        
        console.log('表单提交：', {
            categoryName: categoryName,
            categoryType: categoryType,
            parentCategoryId: parentCategoryId,
            hasParentCategories: hasParentCategories
        });
        
        if (!categoryName) {
            e.preventDefault();
            alert('请输入分类名称！');
            return false;
        }
        
        if (!categoryType) {
            e.preventDefault();
            alert('请选择分类类型！');
            return false;
        }
        
        if (categoryType === 'sub') {
            if (!hasParentCategories) {
                e.preventDefault();
                alert('暂无父分类可选择，请先添加父分类！');
                return false;
            }
            if (!parentCategoryId) {
                e.preventDefault();
                alert('子分类必须选择一个父分类！');
                return false;
            }
        }
        
        // 如果是父分类，确保parentCategoryId为空
        if (categoryType === 'parent') {
            $('#parentCategoryId').val('');
            console.log('父分类，清空parentCategoryId');
        }
        
        console.log('表单验证通过，准备提交');
        return true;
    });
    
    // 页面加载完成后初始化
    initializePage();
    
    // 延迟再次检查，以防有异步加载的内容
    setTimeout(function() {
        console.log('延迟检查页面状态');
        checkSubmitButtonState();
    }, 1000);
});
</script>
</body>
</html> 
